<template>
	<view>
		<!-- 发布遮罩 -->
		<u-mask :show="showz" @click="showz = false" :zoom="false" :mask-click-able='false'>
			<view class="warp1 " :style="{
				height:$height()+'px',
			   width:$width()+'px',
			}">
				<view class="warp1_1 ">
					<view class="warp1_1_1">
						<text class="t_1">支付</text>
						<view class="t_2">
							<text>¥</text>
							<text>398.00</text>
						</view>
						<view class="warp1_1_2">
							<view class="warp1_1_2_1" @click.stop="type=1">
								<image class="img1" v-if="type==1" src="../../static/img/success.png" />
								<image v-else class="img2" src="../../static/img/wxzh.png" />
								<image class="img3" src="../../static/img/wx2.png" />
								<text>微信支付</text>
							</view>
							<view class="warp1_1_2_1" @click.stop="type=2">
								<image v-if="type==2" class="img1" src="../../static/img/success.png" />
								<image v-else class="img2" src="../../static/img/wxzh.png" />
								<image class="img3" style="width: 54rpx;height: 54rpx;"
									src="../../static/img/zfb.png" />
								<text>微信支付</text>
							</view>
						</view>
						<text class="zf">支付</text>
					</view>
					<image @click.stop="showz=false" src="../../static/img/gb.png" mode=""
						style="width:64rpx ;height:64rpx ;display: block;margin:40rpx auto;" />
				</view>
			</view>
		</u-mask>
	
	</view>
</template>

<script>
	export default {
		name: "fb-pop",
		data() {
			return {
				type: 1,
				showz: false
			};
		},
		methods: {
			//跳转
			submit(a) {
				uni.navigateTo({
					url: `/pages/${a}/${a}`
				})
			},
			sign() {
				this.showz = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp1 {
		position: relative;

		.warp1_1 {
			.warp1_1_1 {
				box-sizing: border-box;
				background: white;
				height: 550rpx;
				border-radius: 8rpx;
				position: relative;

				.zf {
					position: absolute;
					transform: translateX(-50%);
					bottom: 40rpx;
					width: 235rpx;
					left: 50%;
					height: 80rpx;
					background: #FF1B1B;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					display: inline-block;
					font-size: 30rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #FFFFFF;
				}

				.warp1_1_2 {
					display: flex;
					justify-content: space-around;

					.warp1_1_2_1 {
						width: 40%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-size: 24rpx;
							font-family: OPPOSans;
							font-weight: 400;
							color: #666666;
						}

						.img1 {
							width: 30rpx;
							height: 30rpx;
						}

						.img2 {
							width: 30rpx;
							height: 30rpx;
						}

						.img3 {
							width: 64rpx;
							height: 52rpx;
						}
					}
				}

				.t_2 {
					text-align: center;
					margin: 50rpx 0 80rpx 0;

					text:nth-of-type(1) {
						font-size: 32rpx;
						font-family: OPPOSans;
						font-weight: bold;
						color: #FF1B1B;
						margin-right: 15rpx;
					}

					text:nth-of-type(2) {
						font-size: 52rpx;
						font-family: OPPOSans;
						font-weight: bold;
						color: #FF1B1B;
					}
				}

				.t_1 {
					padding-top: 50rpx;
					display: block;
					text-align: center;
					font-size: 32rpx;
					font-family: OPPOSans;
					font-weight: 600;
					color: #181818;

				}
			}

			position: absolute;
			top: 50%;
			// border: 1px solid black;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			height: 659rpx;
			border-radius: 8rpx;

		}
	}
</style>
